import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import Swiper from 'react-native-swiper';

const Home = () => {
  
  return <View style={{ width: '100%', height: 300 }}>
    <Swiper
      style={styles.wrapper}
      showsButtons={true}
      loop={true}
      autoplay={true}
      onIndexChanged={(index) => { }}
      // showsPagination={true}//分页是否显示
      // dot={<View></View>}//默认为24像素的小点
      // dotColor='#000'
      // activeDotColor='#f00'
      // activeDotStyle={ }//激活的时候小圆点变成什么样子
      // nextButton={<Text style={{}}> &gt; </Text>}
      // prevButton={<Text style={{}}> &lt; </Text>}
    >
      <View style={styles.slide}>
        <Text style={styles.text}>Hello Swiper</Text>
      </View>
      <View style={styles.slide}>
        <Text style={styles.text}>Beautiful</Text>
      </View>
      <View style={styles.slide}>
        <Text style={styles.text}>And simple</Text>
      </View>
    </Swiper>
  </View>
}
const styles = StyleSheet.create({
  wrapper:{
    backgroundColor:'#ccc',
    justifyContent:'center',
    alignItems:'center',
  },
  slide: {
    flex:1,
    justifyContent:'center',
    alignItems:'center',
  },
  text: {
    fontSize:30,
    fontWeight:'500',
    textAlign:'center'
  }
})
export default Home;